<template>
    <div class="icon-wrapper">
        <div class="title">{{data.title}}</div>
        <div class="wrapper flex">
                 <div class="icon-text f-center" v-for="(item,index) in data.iconList" :key="index" @click="iconClickEvent">
            <svg class="icon" :style="'color:'+item.color+';'" aria-hidden="true">
            <use :xlink:href="item.icon"></use>
            </svg>
            <div class="i-text">{{item.text}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        data:Object
    },
    methods:{
        iconClickEvent(){
            this.$emit('iconClickEvent')
        }
    }
}
</script>
<style scoped>
    .icon-wrapper{
    padding: .2rem;
    border-radius: .3rem;
    background-color: #fff;
    margin-top: .4rem;
}
.title{
    font-size: .5rem;
    color: #888;
}
.wrapper{
    flex-wrap: wrap;
}
.icon-text{
    width: 25%;
    flex-direction: column;
    padding: 1rem 0;
}
.i-text{
    font-size: .5rem;
    text-align: center;
    margin-top: .2rem;
}
</style>